<template>
    <div class="person">
        <h2>{{ person.name }}</h2>
    </div>
</template>

<script setup lang="ts" name="Persona">
import { ref } from 'vue'
import { type Person, type Persons} from '@/types'

let person: Person = {
    name: 'zzq',
    age: 28
}
// 泛型数组
let personList: Array<Person> = [
    {name: 'zzq', age: 28},
    {name: 'zm', age: 27},
    {name: 'z', age: 5},
]

let personList2: Person[] = [
    {name: 'zzq', age: 28},
    {name: 'zm', age: 27},
    {name: 'z', age: 5},
]

let personList3: Persons = [
    {name: 'zzq', age: 28},
    {name: 'zm', age: 27},
    {name: 'z', age: 5},
]
</script>

<style scoped>
.person {
    background-color: #afcfb7;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 20px;
    margin: 10px 0;
}

button {
    margin-right: 5px;
}

hr {
    border-width: 3px;
    border-color: black;
    border-style: solid;
}
</style>
